<template>
	<view class="body-container">
		<view :style='{"padding":"40rpx 0 160rpx","borderColor":"#21d5ae","alignItems":"stretch","display":"block","minHeight":"100vh","overflow":"hidden","flexWrap":"wrap","background":"url(http://codegen.caihongy.cn/20221229/cd91288d91b74c7fbf67fdc76498bf17.gif) no-repeat left top / 100% auto,url(http://codegen.caihongy.cn/20221229/be9a592af083470ebaeeafa6f062e534.gif) no-repeat left bottom / 100% auto,url(http://codegen.caihongy.cn/20221229/401a0c9f5ae64ab7bced56c475f40822.png) no-repeat center top / 100% auto,url(http://codegen.caihongy.cn/20221229/35df15480d2d4680b0171ef8190b3774.png) no-repeat center bottom / 100% auto,linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(65,201,154,1) 100%),#fff","borderWidth":"0px 0 0","width":"100%","position":"relative","borderStyle":"dashed","height":"auto"}'>
		<view class="yuyueList">
			<view class="yuyueItem" v-for="item in yuyueList" :key="item.id" @tap="onDetailTap('jingdianxinxi',item.jingdianxinxiEntity.id)">
				<view class="yuyueItem-info">
					<view class="yuyueName">
						{{item.jingdianxinxiEntity.jingdianmingcheng}}
					</view>
					<view class="yuyueName" v-if="item.jingdianxinxiEntity.callHead === item.jingdianxinxiEntity.callEnd">
						当前叫号：{{item.jingdianxinxiEntity.callHead}}-{{item.jingdianxinxiEntity.callEnd}}（还没开始叫号）
					</view>
					<view class="yuyueName" v-else>
						当前叫号：{{item.jingdianxinxiEntity.callHead}}-{{item.jingdianxinxiEntity.callEnd}}
					</view>
					<view class="yuyueName">
						我的预约号码：{{item.yuyuehaoma}}
					</view>
				</view>
				<view class="yuyueItem-status">
					    <view v-if="item.type === '0'" :style="{ backgroundColor: 'yellow', borderRadius: '5px',padding: '5px'}">排队中</view>
					    <view v-if="item.type === '1'" :style="{ backgroundColor: 'red', borderRadius: '5px',padding: '5px'}">已过号</view>
					    <view v-if="item.type === '2'" :style="{ backgroundColor: 'green', borderRadius: '5px',padding: '5px'}">正在叫号</view>
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				jingdianId:'',
				currentStatus:1,
				yuyueList:[]
			};
		},
		onLoad() {
			this.getYuyueList()
		},
		methods:{
			onDetailTap(tableName, id) {
				this.$utils.jump(`../${tableName}/detail?id=${id}`)
			},
			async getYuyueList() {
				const res = await this.$api.list(`yuyuexinxi`, this.ruleForm);
				this.yuyueList = res.data.list
				console.log('this.yuyueList: ', this.yuyueList)

			},
		}
	}
</script>

<style lang="scss" scoped>
	.currentCss{
		background-color: green;
	}
	.statusCss{
		color: #fff;
		border-radius: 5px;
		padding: 5px;
		margin-left: 100px;
	}
	.yuyueList{
		margin: 10px;
		
		.yuyueItem{
			margin-bottom: 20px;
			// background-color: #2eca97;
			background-color: rgba(90, 207, 164, 0.5);
			display: flex;
			align-items: center;
			border: 1px solid #21906e;
			border-radius: 5px;
			justify-content: space-between;
			padding: 10px 10px 10px 10px;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			transition: box-shadow 0.3s ease-in-out; /* 添加过渡效果 */
		}
	}
	.body-container{
		background-color: #d2f1e4;
		height: 100vh;
		font-size: 18px;
		.title{
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
